<template>
    <div id='container'></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

let chart

onMounted(() => {
    chart = new Chart({
        container,
        autoFit: true,
    });

    chart
        .title('水平条形图')
        .coordinate({
            transform: [
                {
                    type: 'transpose'
                }
            ]
        })
        .interval()
        .data({
            type: 'fetch',
            value: '/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv'
        })
        .encode('x', 'letter')
        .encode('y', 'frequency')
        .transform({
            type: 'sortX',
            reverse: true
        })
        .axis('y', {
            labelFormatter: '.0%'
        })
        .label({
            text: 'frequency',
            formatter: '.1%',
            textAlign: (d) => {
                return d.frequency >= 0.008 ? 'right' : 'start'
            },
            fill:(d) => {
                return d.frequency >= 0.008 ? '#fff' : '#000'
            },
            dx:(d) => {
                return d.frequency >= 0.008 ? -5 : 5
            }
        })
    chart.render();
});

// 销毁
onUnmounted(() => {
    chart.destroy();
    chart = null;
});
</script>

<style lang='less' scoped>
#container {
    width: 800px;
    height: 400px;
}
</style>